<template>
	<view class="height">
		<u-navbar style="position: fixed;" border-bottom="false"  background="rgba(0,0,0,0)" is-fixed="true" z-index="999" title=" "></u-navbar>
		<view style="text-align: center;height: 93px;margin-top: 140px;">
			<view class="fb" style="font-size: 30px;color:rgb(241,158,194);">{{ has_come ? '大姨妈来了' : '预计下次开始日期' }}</view>
			<view v-if="has_come" class="">
				第
				<text class="fb" style="font-size: 40px;color:rgb(241,158,194);">{{ has_come }}</text>
				天
			</view>
			<view v-else class="">
				还剩
				<text class="fb" style="font-size: 40px;color:rgb(241,158,194);">{{ next_day }}</text>
				天
			</view>
		</view>
		<view style="text-align: center;margin: 50px auto;"><image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/ym.png" mode="widthFix" style="width: 50%;"></image></view>
		<view @click="show = true" class="cf button" style="background: #fa1e8a;width: 240px;line-height: 36px;text-align: center;margin: auto;">
			大姨妈{{ has_come ? '走' : '来' }}了
		</view>
		<view class="btn flex" style="text-align: center;background: #ffcdd9;border-top:#fff solid 1px">
			<view class="list">
				<view @click="gourl('/pages/content/content', '1')" class="f12" style="background: #fed4e0;padding:10px 0;color:#dc7da5">
					<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/shouyea.png" mode="widthFix" style="width: 30px;"></image>
					<view>首页</view>
				</view>
			</view>
			<view class="list">
				<view @click="gourl('/pages/yima/yima')" class="f12" style="background: #fde0e5;padding:10px 0;color:#c50d63">
					<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/yjilu1.png" mode="widthFix" style="width: 30px;"></image>
					<view>记录</view>
				</view>
			</view>
			<view class="list">
				<view @click="gourl('/pages/rili/rili')" class="f12" style="background: #fed4e0;padding:10px 0;color:#dc7da5">
					<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/yrili.png" mode="widthFix" style="width: 30px;"></image>
					<view>日历</view>
				</view>
			</view>
			<view class="list">
				<view @click="gourl('/pages/my/my')" class="f12" style="background: #fed4e0;padding:10px 0;color:#dc7da5">
					<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/nv.png" mode="widthFix" style="width: 30px;"></image>
					<view>我的</view>
				</view>
			</view>
		</view>
		<u-picker @confirm="confirm" v-model="show" mode="time" :default-time="default_time"></u-picker>
	</view>
</template>

<script>
import dayjs from 'dayjs';
export default {
	data() {
		return {
			next_day: 29,
			has_come: 0,
			show: false,
			default_time: dayjs().format('YYYY-MM-DD')
		};
	},
	onLoad() {
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#ffffff'
		});
		this.aunt_status();
	},
	methods: {
		gourl(e, type) {
			if (type == '1') {
				uni.switchTab({
					url: e
				});
			}
			uni.navigateTo({
				url: e
			});
		},
		async aunt_status() {
			let { has_come, next_day,aunt_avg } = await this.$u.api.aunt_status();
			this.has_come = has_come;
			this.next_day = next_day;
			this.$u.vuex('vuex_avg',aunt_avg)
			uni.setStorageSync('has_come',has_come)
		},

		async confirm(e) {
			const { year, month, day } = e;

			const time = year + '-' + month + '-' + day;
			let res = await this.$u.api.aunt_save({ time });
			this.aunt_status();
		}
	}
};
</script>

<style>
/* page{background-image: linear-gradient(#faede5, #ffd1db)} */
.height {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: linear-gradient(#faede5, #ffd1db);
}
.btn {
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 80px;
	bottom: 0;
	left: 0;
}
.btn .list {
	width: 25%;
	padding: 0 10px;
	box-sizing: border-box;
}
</style>
